<template>
  <div class="app">
   <!-- 头部导航 -->
 <my-head title="新手指引" :go="true" :ri="false"></my-head>
 <!-- 中间内容 -->
  <div class="contat">
      <div class="extraction">
      <p>小荷在线</p>
      <!-- 小荷在线的三个优势 -->
      <p><span class="ppp">小荷在线优势</span></p>
      <div class="advantage">
     <ul>
         <li><img src="../../../../../static/img/privacy.gif">
             <ul>
                 <li>隐私保护最可靠</li>
             </ul>
         </li>
         <li><img src="../../../../../static/img/profit.gif">
              <ul>
                 <li>门槛低，收益高</li>
             </ul>
         </li>
         <li><img src="../../../../../static/img/depository.gif">
              <ul>
                 <li>一站式资金存管</li>
             </ul>
         </li>
     </ul>
      </div>
      <!-- 新年专享 -->
      <p><span>新年专享</span></p>
      <!-- 理财的详情 -->
      <div class="financialdetails">
      <ol>
          <li>小和理财20180125二期 </li>
          <li>
              <dl>
                  <dt><span>7.20</span><span>%</span></dt>
                  <dd>年化利率</dd>
              </dl>
              
          </li>
          <li>
             <ol class="days">
                 <li>15天</li>
                 <li>1000.00元/份</li>
                 <li>限投10000.00元</li>
             </ol>
          </li>
          <li><router-link to="">立即投资</router-link> </li>
      </ol>
      </div>
        <!-- 理财的详情 -->
      <div class="financialdetails">
      <ol>
          <li>小和理财20180125二期 </li>
          <li>
              <dl>
                  <dt><span>7.20</span><span>%</span></dt>
                  <dd>年化利率</dd>
              </dl>
              
          </li>
          <li>
             <ol class="days">
                 <li>15天</li>
                 <li>1000.00元/份</li>
                 <li>限投10000.00元</li>
             </ol>
          </li>
          <li><router-link to="">立即投资</router-link> </li>
      </ol>
      </div>
      </div>
      <!-- 选择物流 -->
      <div class="logistics">
       <!-- 选择流程 -->
      <p><span>选择流程</span></p>     
      </div>
      <!-- 流程图片 -->
      <div class="logisticspicture">
      <img src="../../../../../static/img/logistics.gif" alt="图片加载错误">
      </div>

 </div>
  </div>
</template>

<script>
import Head from '@/components/Head'
export default {
name:"app",
data(){
    return{
// 头部的svg图标
    navs:[{id:1,svg:"#icon-kefu"}]
    }
},
methods:{
  // 返回上一级
ones(){
  this.$router.go(-1);
}
},
  components: {
    myHead:Head
  }
}
</script>

<style scoped>
.app{
    width: 100%;
    display: flex;
    flex-direction: column;
}
/* 头部 */
.app .nav{
    width: 100%;
    padding:.15rem 0;
    border: 1px solid #eee;
    position: absolute;
    left: 0;
    top: 0;
    background: white;
} 
.head{
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.app .nav ul{
    display: flex
};
.app .nav ul li:nth-child(1){

}
.app .nav ul li:nth-child(2){
    flex: 1;
    color: #222222; 
    text-align: center;
}
.app .nav ul li:nth-child(3){
    margin-right: 0.3rem;
}
.app .nav ul .icon{
    height: .23rem; 
    width: .23rem;
}
/* 中间内容 */
.app .contat{
    flex: 1;
    width: 100%;
    background: #fe8a37;
}
.app .contat .extraction{
    margin: 0.8rem 0.25rem 0 0.25rem;
    text-align: center;
}
.app .contat .extraction p:nth-child(1){
    font-size: 30px;
    color: white;
    letter-spacing: 0.05rem;
    margin-bottom: 0.43rem;
}
.app .contat .extraction p:nth-child(2){
    border-bottom: 1px solid white; 
    height: 0.1rem;
    margin-bottom: 0.5rem;
    color: white;
}
.app .contat .extraction p span{
    padding:  0 0.28rem 0 0.28rem;
    display: inline-block;
    background: #fe8a37;
}
.app .contat .extraction p:nth-child(4){
    border-bottom: 1px solid white;
    height: 0.1rem;
    margin-bottom: 0.5rem;
    color: white;
}
.app .contat .extraction p span{
    padding:  0 0.28rem 0 0.28rem;
    display: inline-block;
    background: #fe8a37;
}
.app .contat .extraction .advantage{
    width: 100%;
    background: white;
    margin-bottom: 0.31rem;
}
.app .contat .extraction .advantage ul{
    display: flex;
}
.app .contat .extraction .advantage ul li{
    flex: 1;
    font-size: 13px;
    text-align: center;
}
.app .contat .extraction .advantage ul li img{
    width: 0.68rem;
    height: 0.78rem;
    margin: 0.17rem 0 0.16rem 0; 
}
.app .contat .extraction .advantage ul li ul li{
    margin-bottom: 0.27rem;
}
/* 理财的详情数据 */
.app .contat .extraction .financialdetails{
    width: 100%;
    background: white; 
    margin-bottom: 0.31rem;
    overflow: hidden;
}
.app .contat .extraction .financialdetails ol li ol{
    display: flex;
}
.app .contat .extraction .financialdetails ol li:nth-child(1){
    height: 0.42rem;
    line-height: 0.42rem; 
    border-bottom: 1px solid #ebebeb;
    margin-left: -1.3rem;
}
.app .contat .extraction .financialdetails ol li:nth-child(2){
    margin-top: 0.2rem;
}
.app .contat .extraction .financialdetails ol li dl dt span:nth-child(1){
    display: inline-block; 
    font-size: 18px;
    color: #975c58;
}
.app .contat .extraction .financialdetails ol li dl dt span:nth-child(2){
    font-size: 15px;
    display: inline-block; 
    caption-side: #975c58;
    margin-left: 0.02rem;
}
.app .contat .extraction .financialdetails ol li dl dd{
    margin-top: 0.13rem;
}
.app .contat .extraction .financialdetails ol li ol li:nth-child(1){
    margin-left:-0.1rem;
}
.app .contat .extraction .financialdetails ol li:nth-child(3){
    margin-top: 0.2rem;
}
.app .contat .extraction .financialdetails .days li{
    font-size: 14px;
}
.app .contat .extraction .financialdetails .days li{
    height: 0.2rem;
    line-height: 0.2rem;
}
.app .contat .extraction .financialdetails .days li:nth-child(1){
    height: 0.2rem;
    line-height: 0.2rem; 
    padding-right:0.1rem;
    color: #aeaeae;
    border-bottom: none; 
    border-right: 1px solid #e9e9e9; 
    margin-left: 0.2rem;
}
.app .contat .extraction .financialdetails .days li:nth-child(2){
    flex: 1;
    color: #aeaeae;
    border-right: 1px solid #e9e9e9;
    margin-top:0.01rem;
    }
.app .contat .extraction .financialdetails .days li:nth-child(3){
    color: #aeaeae;
    margin-top:0.01rem;
    padding-left: 0.1rem;
    margin-right: 0.1rem;
}
.app .contat .extraction .financialdetails ol li:last-child{
    margin-top:0.1rem;
    margin-bottom: 0.2rem;
}
.app .contat .extraction .financialdetails ol li a{
    padding: 0.1rem 0.2rem;
    font-size: 14px;
    color: white;
    background: #fe8a37;
    border-radius: 0.03rem;
}
.app .contat .logistics{
    width: 100%;
    text-align: center;
}
.app .contat .logistics p{
    border-bottom: 1px solid white;
    height: 0.1rem;
    margin-bottom: 0.5rem;
    color: white;
}
.app .contat .logistics p span{
    padding:  0 0.28rem 0 0.28rem;
    display: inline-block;
    background: #fe8a37;
}
.app .contat .logisticspicture{
    margin:0 0.13rem;
    padding-bottom: 0.4rem;
}
.app .contat .logisticspicture img{
    width: 100%;
}
</style>
